<template>
  <div class="inbound-container">
    <el-form :inline="true" label-width="120px" :model="form">
      <el-form-item :label="translate('出库编码') + '：'">
        <div class="item">{{ form.Code }}</div>
      </el-form-item>
      <el-form-item :label="translate('出库名称') + '：'">
        <div class="item">{{ form.FullName }}</div>
      </el-form-item>
      <el-form-item :label="translate('出库单号') + '：'">
        <div class="item">{{ form.OBNo }}</div>
      </el-form-item>
      <el-form-item :label="translate('出库类型') + '：'">
        <div class="item">
          {{ form.OBType === '1' ? translate('委托仓储出库') : '' }}
        </div>
      </el-form-item>
      <el-form-item :label="translate('用料单位') + '：'">
        <div class="item">{{ form.POUnit }}</div>
      </el-form-item>
      <el-form-item :label="translate('发料库点') + '：'">
        <div class="item">{{ form.WHName }}</div>
      </el-form-item>
      <el-form-item :label="translate('发料日期') + '：'">
        <div class="item">{{ form.DeliveryDate }}</div>
      </el-form-item>
      <el-form-item :label="translate('收货状态') + '：'">
        <div class="item">
          {{
            form.ReceiveStatus === '1'
              ? translate('已出库')
              : form.ReceiveStatus === '0'
              ? translate('未出库')
              : ''
          }}
        </div>
      </el-form-item>
      <!-- <el-form-item :label="translate('项目名称') + '：'">
        <div class="item">{{ form.ProName }}</div>
      </el-form-item>
      <el-form-item :label="translate('子项目名称') + '：'">
        <div class="item">{{ form.CProName }}</div>
      </el-form-item>
      <el-form-item :label="translate('自定义编号') + '：'">
        <div class="item">{{ form.CustomNo }}</div>
      </el-form-item>
      <el-form-item :label="translate('车牌号') + '：'">
        <div class="item">{{ form.CarNum }}</div>
      </el-form-item>
      <el-form-item :label="translate('合计重量') + '：'">
        <div class="item">{{ form.TotalWeight }}</div>
      </el-form-item>
      <el-form-item :label="translate('合计采保费') + '：'">
        <div class="item">{{ form.TotalSafeAmt }}</div>
      </el-form-item>
      <el-form-item :label="translate('合计检测费') + '：'">
        <div class="item">{{ form.TotalCheckAmt }}</div>
      </el-form-item>
      <el-form-item :label="translate('装卸费') + '：'">
        <div class="item">{{ form.TotalPackAmt }}</div>
      </el-form-item> -->
      <el-form-item :label="translate('单据单号') + '：'">
        <div class="item">{{ form.SourceBillNo }}</div>
      </el-form-item>
      <el-form-item :label="translate('收货人') + '：'">
        <div class="item">{{ form.Receiver }}</div>
      </el-form-item>
      <!-- <el-form-item :label="translate('大类号') + '：'">
        <div class="item">{{ form.LCNo }}</div>
      </el-form-item> -->
      <el-form-item :label="translate('总金额') + '：'">
        <div class="item">{{ form.TotalAmt }}</div>
      </el-form-item>
      <el-form-item :label="translate('备注') + '：'">
        <div>{{ form.Remark }}</div>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable" border :data="tableData">
      <el-table-column
        :label="translate('批次号')"
        min-width="100"
        prop="BatchNo"
      />
      <el-table-column
        :label="translate('物资编码')"
        min-width="100"
        prop="ItemCode"
      />
      <el-table-column
        :label="translate('物资名称')"
        min-width="100"
        prop="ItemName"
      />
      <el-table-column
        :label="translate('物料规格')"
        min-width="100"
        prop="ItemSepc"
      />
      <el-table-column
        :label="translate('物料描述')"
        min-width="100"
        prop="ItemDescription"
      />
      <!-- <el-table-column
        :label="translate('辅助物料描述')"
        min-width="120"
        prop="AItemDescription"
      /> -->
      <el-table-column
        :label="translate('计量单位')"
        min-width="100"
        prop="ItemUnit"
      />
      <el-table-column
        :label="translate('实发数量')"
        min-width="100"
        prop="Qty"
      />
      <el-table-column :label="translate('单价')" min-width="90" prop="Price" />
      <!-- <el-table-column
        :label="translate('辅助计量单位')"
        min-width="120"
        prop="AItemUnit"
      /> -->
      <!-- <el-table-column
        :label="translate('辅助计量单位数量')"
        min-width="130"
        prop="AItemQty"
      /> -->
      <el-table-column
        :label="translate('实发件数')"
        min-width="100"
        prop="ActualNum"
      />
      <el-table-column
        :label="translate('料款金额')"
        min-width="120"
        prop="ItemAmt"
      />
      <el-table-column
        :label="translate('运杂费')"
        min-width="120"
        prop="PackAmt"
      />
      <el-table-column
        :label="translate('采保费率')"
        min-width="100"
        prop="SafeRate"
      />
      <el-table-column
        :label="translate('料款及运杂费小计')"
        min-width="140"
        prop="ItemPackAmt"
      />
      <el-table-column
        :label="translate('四号定位')"
        min-width="100"
        prop="WorkNo"
      />
      <el-table-column
        :label="translate('库存备注')"
        min-width="100"
        prop="StockRemark"
      />
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        :current-page="pageNo"
        :layout="'total, sizes, prev, pager, next, jumper'"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentchiled"
        @size-change="handleSizechiled"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { DiffOutboundBillDetail } from '@/api/form'
  import { translate } from '@/i18n'
  const props = defineProps<{
    id: string
  }>()
  const form: any = ref({})
  const tableData: any = ref([])
  const id: any = props.id || ''
  const pageNo = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const getTableData = async () => {
    const params = {
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableName: '',
      sort: '',
      order: '',
      wheres: '',
      export: true,
      value: id.value,
    }
    const data = await DiffOutboundBillDetail(params)
    tableData.value = data.rows || []
    form.value = data.master || {}
  }
  const handleCurrentchiled = (val: number) => {
    pageNo.value = val
  }
  const handleSizechiled = (val: number) => {
    pageSize.value = val
  }

  onMounted(() => {
    getTableData()
  })
</script>

<style lang="scss" scoped>
  .inbound-container {
    .item {
      width: 160px;
    }
  }
</style>
